<template>
  <span className="text" style="margin-right: 20px;">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
</template>

<script>
export default {
  name: "dateTime",
  data() {
    return {
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    }
  },
  mounted() {
    this.timeFn();
  },
  methods: {
    formatLongTime(time, fmt) {
      if (!time) return '';
      else {
        const date = new Date(time);
        const o = {
          'M+': date.getMonth() + 1,
          'd+': date.getDate(),
          'H+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds(),
          'q+': Math.floor((date.getMonth() + 3) / 3),
          S: date.getMilliseconds(),
        };
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            (date.getFullYear() + '').substr(4 - RegExp.$1.length)
          );
        for (const k in o) {
          if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                ? o[k]
                : ('00' + o[k]).substr(('' + o[k]).length)
            );
          }
        }
        return fmt;
      }
    },
    timeFn() {
      this.dateDay = this.formatLongTime(new Date(), 'HH: mm: ss');
      this.dateYear = this.formatLongTime(new Date(), 'yyyy-MM-dd');
      this.dateWeek = this.weekday[new Date().getDay()];
      setInterval(() => {
        this.dateDay = this.formatLongTime(new Date(), 'HH: mm: ss');
        this.dateYear = this.formatLongTime(new Date(), 'yyyy-MM-dd');
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000)
    },
  }
}
</script>

<style lang="scss">

</style>
